<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="icon" type="image/x-icon" href="/zf/images/favicon.ico">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录|房屋租赁系统</title>
    <link rel="stylesheet" type="text/css" href="/zf/css/styles1.css">
</head>
<body>
<div class="wrapper">

    <div class="container">
        <h1>房屋租赁系统</h1>
        <form class="form" id="loginform" action="logincheck" method="post">
            <div><input type="text" name="username" placeholder="用户名"></div>
            <div><input type="password" name="password" placeholder="密码"></div>
            <div class="emailcode clearfix">
                <input type="text" id="code" name="code" placeholder="验证码">
                <img id="codeimg" alt="验证码" onclick="reloadCode()" src="/imagecode">
            </div>

            <div class="emailcode clearfix">
                <button type="submit" id="login-button">管理员登录</button>
            </div>

        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="/zf/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/zf/js/jquery.validate.min.js"></script>
<script type="text/javascript"
        src="/zf/js/localization/messages_zh.js"></script>

<script type="text/javascript">
    window.onload = function () {
        var time = new Date().getTime();//创建不同的时间
        $("#codeimg").attr("src", "imagecode?time=" + time);//因为时间参数不同，请求重新
    };

    //js刷新，重新请求页面,获得新的验证码
    function reloadCode() {
        var time = new Date().getTime();//创建不同的时间
        $("#codeimg").attr("src", "imagecode?time=" + time);//因为时间参数不同，请求重新
    }
</script>

<script type="text/javascript">


    $().ready(function () {
        // 在键盘按下并释放及提交后验证提交表单
        $("#loginform").validate({
            /*success:function(){
             //label.text('').addClass('valid');
            $('#login-button').click(function(event){
            event.preventDefault();
            $('form').fadeOut(500);
            $('.wrapper').addClass('form-success');

        });

        },*/
            rules: {
                username: {
                    required: true,
                },

                password: {
                    required: true,

                },

            },
            messages: {
                username: {
                    required: "请输入用户名",
                },

                password: {
                    required: "请输入密码",

                },

            }
        });
    })

    var error = "${error}";
    if (error == "error") {

        alert("帐户名或密码错误");
    } else if (error == "codeerror") {

        alert("验证码错误");
    }


</script>
</body>
</html>